<template>
   <div style="display:flex">
      <input v-model="content" />
      <div @click="send" class="btn">发送</div>
   </div>
</template>
<script lang="ts" setup name="test">
import { ref } from 'vue'
const socket = ref<WebSocket | null>(null);
const connected = ref(false);
const content = ref('')
const sf = ref('')
let fd = ""
let lock = false
import http from '@/http'
// const wsUrl = 'ws://127.0.0.1:8100?user_id=2';
const wsUrl = 'ws://127.0.0.1:8100';

socket.value = new WebSocket(wsUrl);
// WebSocket连接成功事件
socket.value.onopen = () => {
   console.log('WebSocket connected!');
   connected.value = true;
};
// WebSocket消息接收事件
socket.value.onmessage = (event) => {
   // 处理接收到的消息
   console.log(event)
   const d = JSON.parse(event.data)
   console.log(d)
   if (!lock) {
      fd = d.data
      lock = !lock
   }
};
const send = () => {
   // socket.value?.send(content.value)
   // const jsonD = JSON.stringify({
   //    chatId: "660f93a400c35a4631e96340",
   //    content: content.value,
   //    time: 1712297191,
   //    fromUserAvatar: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
   //    fromUserNickname: "Nick"
   // })
   // const d = {
   //    "type": 1,
   //    "content":content.value,
   //    "chatId": "660fa3cb6cf85b1d8a9ef986",
   // }
   const jsonD = JSON.stringify({
      chatId: "660f93a400c35a4631e96340",
      content: content.value,
      time: getCurTime(),
      fromUserAvatar: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      fromUserNickname: "Nick",
      code: "sendMsg",
      userId:11,
      fromFd: fd
   })
   const d = JSON.stringify({
      // toFd: "3",
      code: "sendMsg",
      data: jsonD
   })
   socket.value?.send(d)
   // http.fetchPost(`/message/sendMsg/11`, d).then((res: any) => {
   //    console.log(res.data)
   // }) // 文字信息
}
const getCurTime = () => {
   // 获取当前时间
   const currentDate = new Date();

   // 获取年、月、日、时、分、秒
   const year = currentDate.getFullYear().toString().padStart(4, '0');
   const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
   const day = currentDate.getDate().toString().padStart(2, '0');
   const hours = currentDate.getHours().toString().padStart(2, '0');
   const minutes = currentDate.getMinutes().toString().padStart(2, '0');
   const seconds = currentDate.getSeconds().toString().padStart(2, '0');

   // 构造格式化后的日期字符串
   return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};
</script>
<style lang="scss">
.btn {
   width: 100px;
   line-height: 50px;
   border: 1px solid red;
   cursor: pointer
}

.img {
   width: 20px;
}

.clip_a {
   display: block;
   width: 128px;
   height: 128px;
}

.clip_a img {
   border: 0;
   position: absolute;
   clip: rect(0 128px 128px 0);
}


// .div1{
// 	width : 0;
// 	height : 0;
// 	background-color : #64c4ed;
// 	border-top :48px solid #f6d365;
// 	border-left :120px solid #f6d365;
// 	border-bottom: 120px solid transparent;
// 	border-right :48px solid transparent;
// 	margin:40px auto;
// }
.slanted-corner {
   width: 120px;
   height: 48px;
}

.slanted-corner:before {
   content: "";
   width: 0;
   height: 0;
   border-top: 48px solid orange;
   // border-bottom: 48px solid transparent;
   border-right: 120px solid transparent;
}

input[type=checkbox] {
   width: 24px;
   height: 24px;
   display: inline-block;
   text-align: center;
   // vertical-align: baseline;
   line-height: 24px;
   position: relative;
   border-radius: 8px;
   outline: none;
   -webkit-appearance: none;
   border: 1px solid #fff;
   -webkit-tab-highlight-color: rgba(0, 0, 0, 0);
   color: #fff;
   background: #fff;
}

label {
   vertical-align: middle;
}

input[type=checkbox]::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   background: #fff;
   border: 1px solid #999999;
   width: 100%;
   height: 100%;
   border-radius: 8px;
   color: #fff;
   margin-top: 5px;
}


input[type=checkbox]:checked::before {
   content: "\2713";
   background: rgba(250, 74, 130, 1);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   color: white;
   font-size: 10px;
   border-radius: 8px;
}

input[type=checkbox]:checked+label {
   color: rgba(250, 74, 130, 1);
}

.check-contain {
   position: relative;

   .label {
      position: absolute;
      top: 15px;
      z-index: 1100;
   }
}

.el-img {
   width: 200px;
   height: 200px;
}

.col-3 {
   width: 200px;
   height: 200px;
}

.tag {
   // margin: 10px;
   background: red;
   // padding: 10px;
   display: inline-block;
}
</style>